<template>
  <div class="Learning-index">
    <h3>使用 <code>useSpeechSynthesis</code> 朗读文本</h3>
    <codeContainer>
      <template #default>
        <div class="w100">
          <ul>
            <li class="link" @click="playByName($event, 'Yunxi Online')">注意看 这个男人叫小帅</li>
            <li class="link" @click="playByName($event, 'WanLung Online')">君不见黄河之水天上来 奔流到海不复回</li>
            <li class="link" @click="playByName($event, 'Nanami Online')">こんにちは</li>
            <li class="link" @click="playByName($event, 'SunHi Online')">안녕하세요</li>
            <li class="link" @click="playByName($event, 'Steffan Online')">A Lannister always pays his debts</li>
          </ul>
          <textarea v-model="text" cols="5" rows="5"></textarea>
          <div class="flex v h w100">
            <button @click="getVoices()">所有</button>
            <button @click="getVoices('zh-')">zh-*</button>
            <button @click="getVoices('zh-TW')">zh-TW</button>
            <button @click="getVoices('zh-HK')">zh-HK</button>
            <button @click="getVoices('ja-JP')">ja-JP</button>
            <button @click="getVoices('ko-KR')">ko-KR</button>
            <button @click="getVoices('en-US')">en-US</button>
          </div>
          <select v-model="voice">
            <option disabled>
              Select Language
            </option>
            <option
                v-for="(voice, i) in voices"
                :key="i"
                :value="voice"
            >
              {{ `${voice.name} (${voice.lang})` }}
            </option>
          </select>
        </div>
        <p>状态： {{ speech.status }}</p>
        <div class="my-2 w100 flex v h">
          <button @click="play">朗读</button>
          <button @click="toggle">toggle</button>
          <button @click="stop">停止</button>
        </div>
      </template>
    </codeContainer>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue';
import CodeContainer from '@/components/codeContainer/codeContainer.vue';
import { useSpeechSynthesis } from '@/assets/js/hooks';

const voice = ref(undefined);
const text = ref('这三年最大的收获  就是遇到了那些形形色色的人们 虽然他们有的让我身陷险地  有的帮我逃出泥沼  那就是这样 才让当年那个自大的我庆幸了许多  我现在觉得这里无比强大 三年之约对我来说  就只不过是要完成一个年少轻狂的约定 给自己的这段成长画上了句号而已。');
const speech = useSpeechSynthesis(text, {
  voice
});

const voices = ref([]);
let synth;

function getVoices(lang) {
  synth = window.speechSynthesis;
  let synthVoices = synth.getVoices();
  // 轮训调用
  if (!synthVoices.length) {
    setTimeout(() => {
      getVoices();
    }, 100);
  } else {
    if (lang) {
      synthVoices = synthVoices.filter((f) => f.lang.includes(lang));
    }
    voices.value = synthVoices;
    voice.value = voices.value[0];
  }
}

onMounted(() => {
  if (speech.isSupported.value) {
    getVoices();
  }
});
const play = () => {
  if (speech.status.value === 'pause') {
    window.speechSynthesis.resume();
  } else {
    speech.speak();
  }
};

const toggle = () => {
  speech.toggle();
};

const stop = () => {
  speech.stop();
};

function playByName(event, name = 'Yunxi Online') {
  // 获取所有声音
  this.getVoices();
  if (name) voice.value = voices.value.find((f) => f.name.includes(name));
  if (event) text.value = event.target.innerText;
  console.log(event.target.innerText);
  nextTick(play);
}
</script>
